<template>
  <table class="table table-bordered border-primary table-striped">
    <thead class="header">
      <tr>
        <th scope="col">name</th>
        <th scope="col">quantity</th>
        <th scope="col">price</th>
        <th scope="col">total</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in goodsList">
        <td>{{ item.name }}</td>
        <td>
          <!-- 商品数量 -->
          <div class="count">
            <Count
              :num="item.qty"
              :min="1"
              :id="item.id"
              @numChange="getNumber"
            ></Count>
          </div>
        </td>
        <td>价格：{{ item.price }}</td>
        <td>总价：{{ item.price * item.qty }}</td>
        <td>
          <button @click="handleDel(item.id)" class="btn btn-danger">
            删除
          </button>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>总计：{{ total }}</td>
        <td></td>
        <td>合计：{{ amount }}</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <Button :goodsList="goodsList" @listReset="listChange"></Button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import Button from './Button.vue';
import Count from './Count.vue';
export default {
  name: 'List',
  components: { Button, Count },
  props: {
    goodsList: {
      type: Array,
    },
    //  商品的总价格
    amount: {
      type: Number,
      default: 0,
    },
    //   商品的总数量
    total: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    // 删除
    handleDel(id) {
      this.$emit('handleDelChange', id);
    },
    //
    getNumber(val) {
      console.log(val);
      //   触发自定义事件
      // 向外传递数据对象
      this.$emit('countChange', val);
    },
    listChange(data) {
      this.$emit('listChange', data);
    },
  },
};
</script>

<style lang="scss" scoped></style>
